<!DOCTYPE html>
<html>

<head>
    <title>mathformula</title>
    <meta charset="utf-8" />
    <style type="text/css">
    button {
        background-color: #fff;
    }

    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #f6f6f6;
        font-size: 14px;
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    .wrapper {
        margin: 0 auto;
        width: 1000px;
    }

    .main {
        display: flex;
        flex-flow: row;
        margin: 20px 0;
        overflow: hidden;
    }

    .left,
    .right {
        position: relative;
        width: 50%;
        border-radius: 8px;
        overflow: hidden;
    }

    .left {
        background-color: #fff;
        margin-right: 10px;
    }

    .right {
        background-color: #fff;
    }

    .formula-wrp {
        margin-top: 20px;
        display: table;
        border-radius: 6px;
        overflow: hidden;
    }

    .formula-wrp .nav-list {
        display: table-cell;
        width: 100px;
        text-align: center;
        background: rgba(3,102,214, .6);
        color: #ddd;
        vertical-align: top;
    }

    .formula-wrp .nav-list .nav-item {
        font-size: 16px;
        padding: 16px 0;
        cursor: pointer;
    }

    .formula-wrp .cont-list {
        display: table-cell;
        width: 900px;
        padding: 20px;
        background: #fff;
    }

    .formula-wrp .cont-list .cont-item {
        display: none;
    }

    .formula-wrp .cont-list .cont-item.active {
        display: block;
    }

    .formula-wrp .nav-list .nav-item.active {
        background: rgba(3,102,214, 1);
        color: #fff;
    }

    .key-bord {
        width: 1000px;
        margin: 30px auto;
        font-size: 20px;
    }

    .formula-wrp button {
        width: 34px;
        height: 34px;
        margin: 3px;
        font-family: serif;
        font-size: 15px;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        outline: none;
        border-radius: 4px;
    }

    .formula-wrp button:active {
        border-color: #0366d6;
        color: #0366d6;
    }

    .formula-wrp button img {
        vertical-align: middle;
    }

    .input-text {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        outline: none;
        border: none;
        resize: none;
    }

    .btn-wrp {
        width: 1000px;
        margin: 0 auto;
    }

    .btn-wrp .btn .input {
        height: 30px;
        padding: 0 10px;
        border-radius: 3px;
        margin-left: 5px;
        outline: none;
        border: none;
        background: #0366d6;
        font-size: 13px;
        color: #fff;
    }

    .btn-wrp .btn .input-color {
        height: 30px;
        border: 1px solid #0366d6;
        border-radius: 3px;
        outline: none;
    }

    .btn-wrp .btn .input:active {
        opacity: 0.6;
    }

    .code-wrp {
        margin-bottom: 20px;
    }

    .code-wrp .show-code {
        display: none;
        border-radius: 8px;
        width: 100%;
        max-height: 480px;
        padding: 10px;
        font-size: 14px;
        text-decoration: none;
        border: none;
        outline: none;
        box-sizing: border-box;
        resize: none;
    }

    .block {
        display: block;
    }

    .output-node {
        box-sizing: border-box;
        height: 100%;
        padding: 10px 20px;
        overflow: scroll;
    }

    .content {
        margin: 20px 0;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        background: #fff;
    }

    .formulas {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
    }

    .formulas li {
        margin: 0;
        padding: 8px 10px;
    }

    .formula {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        padding: 10px 0;
        margin: 10px 0;
    }

    .formula:hover {
        background-color: rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    input[type="color"] {
        vertical-align: middle;
    }

    mtd {
        padding: 0 5px;
    }

    msqrt,
    mroot {
        padding: 0 5px;
    }

    .help {
        display: inline-block;
        margin: 10px;
        color: #0366d6;
        text-decoration: none;
    }

    .help:hover {
        text-decoration: underline;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/ASCIIMathML.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <div class="wrapper">
        <div class="formula-wrp">
            <div class="nav-list">
                <div class="nav-item" data-cont="formula1">symbol </div>
                <div class="nav-item" data-cont="formula2">formula</div>
                <div class="nav-item" data-cont="formula3">Greek</div>
            </div>
            <div class="cont-list">
                <div class="cont-item" id="formula1"></div>
                <div class="cont-item" id="formula2"></div>
                <div class="cont-item" id="formula3"></div>
            </div>
        </div>
        <!-- <div class="key-bord" id="keyBordd"></div> -->
        <div class="main" id="main">
            <div class="left">
                <textarea class="input-text" id="inputText" name="inputText" rows="12"></textarea>
            </div>
            <div class="right">
                <div class="output-node" id="outputNode"></div>
            </div>
        </div>
        <div class="code-wrp">
            <textarea class="show-code" id="showMathCode" rows="5"></textarea>
        </div>
        <div class="btn-wrp">
            <div class="btn" id="btn">
                <input class="input" id="clearInput" type="button" value="清空">
                <input class="input" id="copyMathCode" type="button" value="获取公式代码">
                <input class="input" id="addfontSize" type="button" value="增大字体" />
                <input class="input" id="decreasefontSize" type="button" value="减小字体" />
                <input class="input-color" id="selColor" type="color" value="颜色" />
                <input class="input" id="submit" type="button" value="确定" />
            </div>
            <a class="help" href="./help.html" target="_blank">帮助</a>
        </div>
        <div class="content">
            <ul class="formulas" id="formulas"></ul>
            <!--<pre>-->
            <!--<code>-->
            <!--<math title="x=(-b+- sqrt(b^2-4ac))/(2a)">-->
            <!--<mi>x</mi>-->
            <!--<mo>=</mo>-->
            <!--<mfrac>-->
            <!--<mrow>-->
            <!--<mo>-</mo>-->
            <!--<mi>b</mi>-->
            <!--<mo>±</mo>-->
            <!--<msqrt>-->
            <!--<mrow>-->
            <!--<msup>-->
            <!--<mi>b</mi>-->
            <!--<mn>2</mn>-->
            <!--</msup>-->
            <!--<mo>-</mo>-->
            <!--<mn>4</mn>-->
            <!--<mi>a</mi>-->
            <!--<mi>c</mi>-->
            <!--</mrow>-->
            <!--</msqrt>-->
            <!--</mrow>-->
            <!--<mrow>-->
            <!--<mn>2</mn>-->
            <!--<mi>a</mi>-->
            <!--</mrow>-->
            <!--</mfrac>-->
            <!--</math>-->
            <!--</code>-->
            <!--</pre>-->
            <!--<math title="text(多元泰勒公式：)f(x)= sum_(|a|=0)^n (∂^a)/(∂x^2)(x-a)^a+ sum_(|a|=n+1)R_a(x)(x-a)^2 "><mstyle displaystyle="true" mathcolor="#050505" mathsize="1.5em" mathvariant="serif"><mrow><mtext>多元泰勒公式：</mtext></mrow><mrow><mi>f</mi><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow></mrow><mo>=</mo><mrow><munderover><mo>∑</mo><mrow><mrow><mo>|</mo><mi>a</mi><mo>|</mo></mrow><mo>=</mo><mn>0</mn></mrow><mi>n</mi></munderover></mrow><mfrac><mrow><msup><mo>∂</mo><mi>a</mi></msup></mrow><mrow><mo>∂</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></mfrac><msup><mrow><mo>(</mo><mi>x</mi><mo>-</mo><mi>a</mi><mo>)</mo></mrow><mi>a</mi></msup><mo>+</mo><munder><mo>∑</mo><mrow><mrow><mo>|</mo><mi>a</mi><mo>|</mo></mrow><mo>=</mo><mi>n</mi><mo>+</mo><mn>1</mn></mrow></munder><msub><mi>R</mi><mi>a</mi></msub><mrow><mo>(</mo><mi>x</mi><mo>)</mo></mrow><msup><mrow><mo>(</mo><mi>x</mi><mo>-</mo><mi>a</mi><mo>)</mo></mrow><mn>2</mn></msup></mstyle></math>-->
            <!--<math title="text(科林第二公式：)∫∫∫_Ω(μΔν-νΔμ)dxdydz=∮∮_Sigma (μ ∂ν/∂n - ν ∂μ/∂n )dS"><mstyle displaystyle="true" mathcolor="#050505" mathsize="1.5em" mathvariant="serif"><mrow><mtext>科林第二公式：</mtext></mrow><mo>∫</mo><mo>∫</mo><msub><mo>∫</mo><mo>Ω</mo></msub><mrow><mo>(</mo><mo>μ</mo><mo>Δ</mo><mo>ν</mo><mo>-</mo><mo>ν</mo><mo>Δ</mo><mo>μ</mo><mo>)</mo></mrow><mrow><mi>d</mi><mi>x</mi></mrow><mrow><mi>d</mi><mi>y</mi></mrow><mrow><mi>d</mi><mi>z</mi></mrow><mo>=</mo><mo>∮</mo><msub><mo>∮</mo><mo>Σ</mo></msub><mrow><mo>(</mo><mo>μ</mo><mo>∂</mo><mfrac><mo>ν</mo><mo>∂</mo></mfrac><mi>n</mi><mo>-</mo><mo>ν</mo><mo>∂</mo><mfrac><mo>μ</mo><mo>∂</mo></mfrac><mi>n</mi><mo>)</mo></mrow><mi>d</mi><mi>S</mi></mstyle></math>-->
            <!--<math title="text(方程组：)lim_(n->oo) a/b = {(0,(k<t)),(a_t/b_k,(k>t)),(text(不存在),):}"><mstyle displaystyle="true" mathcolor="#050505" mathsize="1.5em" mathvariant="serif"><mrow><mtext>方程组：</mtext></mrow><munder><mo>lim</mo><mrow><mi>n</mi><mo>→</mo><mo>∞</mo></mrow></munder><mfrac><mi>a</mi><mi>b</mi></mfrac><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left"><mtr><mtd><mn>0</mn></mtd><mtd><mrow><mo>(</mo><mi>k</mi><mo>&lt;</mo><mi>t</mi><mo>)</mo></mrow></mtd></mtr><mtr><mtd><mfrac><msub><mi>a</mi><mi>t</mi></msub><msub><mi>b</mi><mi>k</mi></msub></mfrac></mtd><mtd><mrow><mo>(</mo><mi>k</mi><mo>&gt;</mo><mi>t</mi><mo>)</mo></mrow></mtd></mtr><mtr><mtd><mrow><mtext>不存在</mtext></mrow></mtd><mtd></mtd></mtr></mtable></mrow></mstyle></math>-->
            <!--<math>-->
            <!--<mrow class="block">-->
            <!--<msup>-->
            <!--<mi>sin</mi>-->
            <!--<mn>2</mn>-->
            <!--</msup>-->
            <!--&lt;!&ndash;<br/>&ndash;&gt;-->
            <!--<mi>θ</mi>-->
            <!--</mrow>-->
            <!--<msup>-->
            <!--<mi>sin</mi>-->
            <!--<mn>2</mn>-->
            <!--</msup>-->
            <!--&lt;!&ndash;<br/>&ndash;&gt;-->
            <!--<mi>θ</mi>-->
            <!--</math>-->
            <!--<math>-->
            <!--<apply><power/>-->
            <!--<apply>-->
            <!--<sin/>-->
            <!--<ci>θ</ci>-->
            <!--</apply>-->
            <!--<cn>2</cn>-->
            <!--</apply>-->
            <!--</math>-->
        </div>
    </div>
</body>

</html>